<template>
    <div class="echarts-root">
        <div :id="ecahrtId" style="width: 100%;" :style="{ height: cHeight }"></div>
    </div>
</template>

<script setup>
//圆角、中心空白的饼图
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const ecahrtId = 'lineEcharts' + Math.floor(Math.random() * 10000);

const props = defineProps({
    // 图表高度，带单位
    cHeight: {
        type: String,
        default: '230px',
    },
    title: {
        type: String,
        default: '',
    },
    noCenterTxt: {
        type: Boolean,
        default: false,
    },
    datas: {
        type: Array,
        default: () => {
            return []
        }
    }
});

watch(() => props.datas, value => initEcharts(value))

//图表对象
const echartsObj = ref(null);

//初始化图表
const initEcharts = (seriesDatas = []) => {
    if (echartsObj.value == null) {
        echartsObj.value = echarts.init(document.getElementById(ecahrtId));
    }
    if (!seriesDatas) {
        seriesDatas = []
    }
    let lineDatas = []
    let xDatas = []
    seriesDatas.map(item => {
        lineDatas.push(item.value)
        xDatas.push(item.name)
    })
    let option = {
        title: {
            text: props.title,
            left: 'center'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xDatas,
        },
        yAxis: {
            type: 'value',
        },
        tooltip: {
            trigger: 'item',
            formatter: function (data) {
                return (data.name || '--') + '<br/>数量：' + (data.value || 0)
            }
        },
        series: [
            {
                data: lineDatas,
                type: 'line',
                smooth: true,
                color: "#68E7BA",
                areaStyle: { 
                    color: echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0.5,
                        color: '#68E7BA',
                    }, {
                        offset: 1,
                        color: '#68E7BA',
                    },]),
                },
                stack: 'Total',
                showAllSymbol: true,
                emphasis: {
                    focus: 'series'
                },
                label: {
                    show: true,
                    position: 'top'
                },
                // 折线颜色
                itemStyle: {
                    normal: {
                        color: '#68E7BA',
                        lineStyle: {
                            color: '#68E7BA'
                        }
                    }
                },
            }
        ]
    };
    echartsObj.value.setOption(option);

    window.addEventListener('resize', () => {
        if (echartsObj.value) {
            echartsObj.value.resize()
        }
    })
}

onMounted(() => {
    initEcharts()
})

</script>

<style lang="scss" scoped>
.echarts-root {
    position: relative;
    width: 100%;
    height: 100%;

    .total-div {
        position: absolute;
        top: 36%;
        left: 50%;
        z-index: 11;
        width: 120px;
        height: 70px;
        margin-left: -60px;
        text-align: center;
        border-radius: 10px;

        .total {
            font-size: 30px;
            color: #000;
        }

        .tag {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }
    }
}
</style>